import axios from "axios";
import { Message, MessageBox } from "element-ui";

const instance = axios.create({
  baseURL: process.env.VUE_APP_API,
});

instance.interceptors.request.use(
  (opt) => {
    opt.headers.Authorization = localStorage.getItem("token") || "";
    return opt;
  },
  (error) => {
    Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  
  function (res) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    // 返回成功的东西
    // 因为状态码会用多次所以可以赋值给变量减少代码量
    let code = res.data.meta.status;
    let msg = res.data.meta.msg;
    // 如果token过期就进行跳转登陆页或不跳转
    if (msg == "无效token") {
      MessageBox.confirm("token已过期, 是否跳转登陆页面?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Message.success("跳转成功");
          location.href = "/login";
        })
        .catch(() => {
          Message.error("已取消跳转");
        });
    }
    // 接口文档给的错误状态码，相当于给全局添加了错误提示
    // 400 表示请求的地址不存在或者参数错误
    // 401 表示未授权
    // 403 表示禁止访问
    // 404 表示找不到页面
    // 422 表示请求格式正确，但是语义不对，服务器无法响应
    // 500 表示服务器内部错误，跟前端无关
    if (
      code == 400 ||
      code == 401 ||
      code == 403 ||
      code == 404 ||
      code == 422 ||
      code == 500
    ) {
      Message.error(msg);
    }
    return res;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);
export default instance;
